<template>
	<view class="container">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentIndex === index}"
			 @click="tabClick(index)">
				{{item.text}}
			</view>
		</view>

		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="scrollToLoadData(tabItem)">
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
					<!-- 订单列表 -->
					<view v-else>
						<view class="order-item" v-for="item in tabItem.orderList" :key="item.id">
							<view @click="toOrderDetail(item.id)">
								<view class="order-detail">
									<view class="order-detail-number">Order {{item.order_no}}</view>
									<view class="order-detail-state">{{item.order_state_desc}}</view>
								</view>
								<view class="order-time">Order On {{item.create_date}}</view>
								<view class="order-content" v-for="good in item.goods">
									<view class="order-content-title">{{good.goods_name}}</view>
									<view class="order-content-price">${{good.goods_price}} x {{good.goods_num}}</view>
								</view>
								<view class="order-appointment-time">Appointment: {{item.create_date}}
									<block>(<text class="order-change" @click="changeOrder">change</text>)</block>
								</view>
								<view class="order-operate">
									<!-- <view class="order-operate-btn" :style="tabItem.state > 0?'color: rgba(70, 102, 213, 0.8);' : ''" @click="cancelOrder">{{tabItem.state===1? 'Completed' : (tabItem.state===2? 'Refunded' : 'Cancel & Refund')}}</view> -->
									<view class="order-operate-total">{{item.goods.reduce((total, good) => { return total += good.goods_num}, 0)}}
										Items, Total: <text class="total-red-price">${{item.order_amount}}</text></view>
								</view>
							</view>
							<view class="order-btn-group">
								<button class="order-btn" v-show="item.order_state > 10 && item.order_state < 40">Completed</button>
								<button class="order-btn" v-show="item.order_state < 10" @click="delOrder(item.id)">Delete</button>
								<button class="order-btn" v-show="item.order_state > 10 && item.order_state < 40" @click="refundOrder(item)">Refund</button>
								<button class="order-btn" @click="cancelOrder(item.id)" v-show="item.order_state === 10">Cancel</button>
								<button class="order-btn btn-primary" v-show="item.order_state === 10" @click="goPay(item.order_no)">payment</button>
							</view>
						</view>
					</view>
					<!-- <view class="order-item">
						<view class="order-detail">
							<view class="order-detail-number">Order 27301965710511</view>
							<view class="order-detail-state">PAID</view>
						</view>
						<view class="order-time">Order On 09 Feb 2020</view>
						<view class="order-content">
							<view class="order-content-title">I Unit Air Con Unit</view>
							<view class="order-content-price">$35.00  x  2</view>
						</view>
						<view class="order-appointment-time">Appointment: 15 Mar 2020<block>(<text class="order-change" @click="changeOrder">change</text>)</block></view>
						<view class="order-operate">
							<view class="order-operate-btn" :style="tabItem.state + 1 > 0?'color: rgba(70, 102, 213, 0.8);' : ''" @click="cancelOrder">{{tabItem.state + 1===1? 'Completed' : (tabItem.state===2? 'Refunded' : 'Cancel & Refund')}}</view>
							<view class="order-operate-total">2 Items, Total:  <text class="total-red-price">$70.00</text></view>
						</view>
					</view>
					<view class="order-item" v-for="item in 10">
						<view class="order-detail">
							<view class="order-detail-number">Order 27301965710511</view>
							<view class="order-detail-state">PAID</view>
						</view>
						<view class="order-time">Order On 09 Feb 2020</view>
						<view class="order-content">
							<view class="order-content-title">I Unit Air Con Unit</view>
							<view class="order-content-price">$35.00  x  2</view>
						</view>
						<view class="order-appointment-time">Appointment: 15 Mar 2020<block>(<text class="order-change" @click="changeOrder">change</text>)</block></view>
						<view class="order-operate">
							<view class="order-operate-btn" :style="tabItem.state + 2 > 0?'color: rgba(70, 102, 213, 0.8);' : ''" @click="cancelOrder">{{tabItem.state + 2===1? 'Completed' : (tabItem.state + 2===2? 'Refunded' : 'Cancel & Refund')}}</view>
							<view class="order-operate-total">2 Items, Total:  <text class="total-red-price">$70.00</text></view>
						</view>
					</view> -->
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import Json from "@/Json";
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						state: 0, //状态：0全部，10Unpaid，20Paid, 30In progress, 40 Completed
						text: 'All',
						loadingType: 'more',
						orderList: [],
						pageInfo: {
							page: 1, // 当前页
							limit: 10, // 每页显示数量
						}
					},
					{
						state: 10,
						text: 'Unpaid',
						loadingType: 'more',
						orderList: [],
						pageInfo: {
							page: 1, // 当前页
							limit: 10, // 每页显示数量
						}
					},
					{
						state: 20,
						text: 'Paid',
						loadingType: 'more',
						orderList: [],
						pageInfo: {
							page: 1, // 当前页
							limit: 10, // 每页显示数量
						}
					},
					{
						state: 30,
						text: 'Processing',
						loadingType: 'more',
						orderList: [],
						pageInfo: {
							page: 1, // 当前页
							limit: 10, // 每页显示数量
						}
					},
					{
						state: 40,
						text: 'Completed',
						loadingType: 'more',
						orderList: [],
						pageInfo: {
							page: 1, // 当前页
							limit: 10, // 每页显示数量
						}
					}
				],
				state: 0,
				keyword: ''
			};
		},

		onLoad(options) {
			/**
			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
			 * 替换onLoad下代码即可
			 */
			this.tabCurrentIndex = +options.state;
			// #ifndef MP
			this.loadData()
			// #endif
			// #ifdef MP
			if (options.state == 0) {
				this.loadData()
			}
			// #endif

		},

		methods: {
			// 加载数据
			scrollToLoadData(item) {
				if (item.loadingType == 'more') {
					this.loadData()
				}
			},
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;

				//tab切换只有第一次需要加载数据
				if (source === 'tabChange' && navItem.loaded) {
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if(source === 'reset') {
					navItem.pageInfo.page = 1
					navItem.orderList = []
				}

				navItem.loadingType = 'loading';

				let data = {
					order_state: navItem.state,
					keyword: this.keyword,
					page: navItem.pageInfo.page,
					per_page: navItem.pageInfo.limit
				}

				let _this = this

				this.$api.orderList(data, res => {
					if (res.code === 1) {
						navItem.orderList = [...navItem.orderList, ...res.data.data]

						if (parseInt(res.data.current_page) < res.data.last_page) {
							navItem.pageInfo.page++

							//判断是否还有数据， 有改为 more， 没有改为noMore 
							navItem.loadingType = 'more';
						} else {
							navItem.loadingType = 'noMore'
						}
						//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
						_this.$set(navItem, 'loaded', true);
					} else {
						_this.$common.errorToShow(res.msg)
					}
				})

				// setTimeout(()=>{


				// 	let orderList = Json.orderList.filter(item=>{
				// 		//添加不同状态下订单的表现形式
				// 		item = Object.assign(item, this.orderStateExp(item.state));
				// 		//演示数据所以自己进行状态筛选
				// 		if(state === 0){
				// 			//0为全部订单
				// 			return item;
				// 		}
				// 		return item.state === state
				// 	});
				// 	orderList.forEach(item=>{
				// 		navItem.orderList.push(item);
				// 	})
				// }, 600);	
			},

			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			//删除订单
			deleteOrder(index) {
				uni.showLoading({
					title: '请稍后'
				})
				setTimeout(() => {
					this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
					uni.hideLoading();
				}, 600)
			},
			// 退货
			refundOrder(item) {
				this.$common.navigateTo('cancelOrder?order_id=' + item.id + '&order_no=' + item.order_no);
				// uni.showLoading({
				// 	title: '请稍后'
				// })
				// setTimeout(()=>{
				// 	let {stateTip, stateTipColor} = this.orderStateExp(9);
				// 	item = Object.assign(item, {
				// 		state: 9,
				// 		stateTip, 
				// 		stateTipColor
				// 	})

				// 	//取消订单后删除待付款中该项
				// 	let list = this.navList[1].orderList;
				// 	let index = list.findIndex(val=>val.id === item.id);
				// 	index !== -1 && list.splice(index, 1);

				// 	uni.hideLoading();
				// }, 600)
			},
			//取消订单
			cancelOrder(id) {
				let _this = this
				let data = {
					order_id: id
				}

				this.$common.modelShow('Tips', 'Are you sure you want to cancel the order', () => {
					_this.$api.orderRefund(data, res => {
						if (res.code === 1) {
							_this.$common.successToShow(res.msg, ress => {
								_this.loadData('reset');
							})
						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
				})
			},
			// 删除订单
			delOrder(id) {
				let _this = this

				let data = {
					id: id
				}

				this.$common.modelShow('Tips', 'Are you sure you want to delete', () => {
					_this.$api.orderDel(data, res => {
						if (res.code === 1) {
							_this.$common.successToShow('Successfully Deleted', ress => {
								_this.loadData('reset');
							})
						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
				})
			},
			goPay(id) {
				this.$common.navigateTo('../order/payment?order_no=' + id)
			},
			//订单状态文字和颜色
			orderStateExp(state) {
				let stateTip = '',
					stateTipColor = '#fa436a';
				switch (+state) {
					case 1:
						stateTip = '待付款';
						break;
					case 2:
						stateTip = '待发货';
						break;
					case 9:
						stateTip = '订单已关闭';
						stateTipColor = '#909399';
						break;

						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			},
			// 修改订单
			changeOrder() {
				uni.showToast({
					title: '修改订单',
					duration: 2000
				});
			},
			// 订单详情
			toOrderDetail(id) {
				this.$common.navigateTo('../order/orderDetail?order_id=' + id)
			}
		},
	}
</script>

<style lang="scss">
	page,
	.container {
		// background: $page-color-base;
		height: 100%;
	}

	.swiper-box {
		height: calc(100% - 40px);
		padding: 0 30rpx;
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		// box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: $font-base;
			position: relative;
			color: #252527;
			font-family: Roboto;
			font-weight: bold;
			padding: 0 20rpx;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.order-item {
		margin-top: 20rpx;
		padding: 20rpx 30rpx 15rpx;
		border-top: 2rpx solid rgba(0, 0, 0, 0.15);
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.15);
		display: flex;
		flex-direction: column;
		font-family: Roboto;
		letter-spacing: 1rpx;

		.order-detail {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.order-detail-number {
				font-weight: bold;
				font-size: $font-base;
				color: #252527;
			}

			.order-detail-state {
				font-size: $font-sm - 4upx;
				line-height: 180%;
				color: rgba(31, 28, 29, 0.8);
			}
		}

		.order-time {
			font-size: $font-sm - 4upx;
			line-height: 180%;
			color: #9098B1;
		}

		.order-content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.order-content-title,
			.order-content-price {
				font-size: $font-sm;
				line-height: 180%;
				color: #43454B;
				white-space: pre-wrap;
			}

			.order-content-title {
				flex: 8;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.order-content-price {
				flex: 3;
				text-align: right;
			}
		}

		.order-appointment-time {
			font-family: Roboto;
			font-size: $font-sm - 4upx;
			line-height: 180%;
			color: #9098B1;

			.order-change {
				color: #EB658D;
			}
		}

		.order-operate {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			margin-top: 16rpx;

			.order-operate-btn {
				font-size: $font-sm - 4upx;
				color: rgba(31, 28, 29, 0.8);
				line-height: 180%;
			}

			.order-operate-total {
				font-size: $font-sm - 2upx;
				line-height: 180%;
				color: #1F1C1D;

				.total-red-price {
					margin-left: 10rpx;
					font-weight: bold;
					color: #EB658D;
				}
			}
		}

		.order-btn-group {
			padding: 0;
			margin-top: 16rpx;

			.order-btn {
				display: inline-block;
				float: right;
				font-size: $font-sm + 2upx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #fff;
				margin-left: 20rpx;
				margin-right: 2rpx;

				&.btn-primary {
					// border: 2rpx solid #099CFF;
					color: #099CFF;

					&::after {
						border-color: #099CFF;
					}
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}

	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}

	.uni-load-more__img>view {
		position: absolute
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}

	.load2 {
		transform: rotate(30deg)
	}

	.load3 {
		transform: rotate(60deg)
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s
	}

	.load2 view:nth-child(1) {
		animation-delay: .13s
	}

	.load3 view:nth-child(1) {
		animation-delay: .26s
	}

	.load1 view:nth-child(2) {
		animation-delay: .39s
	}

	.load2 view:nth-child(2) {
		animation-delay: .52s
	}

	.load3 view:nth-child(2) {
		animation-delay: .65s
	}

	.load1 view:nth-child(3) {
		animation-delay: .78s
	}

	.load2 view:nth-child(3) {
		animation-delay: .91s
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1
		}

		100% {
			opacity: .2
		}
	}
</style>
